<template>
    <PageContainer title="文章分类">
        <template #header-right>
            <el-button type="primary" @click="doEdit({})">新增分类</el-button>
        </template>
        <el-table v-loading="loading" :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="100" />
            <el-table-column prop="cate_alias" label="分类别名" width="180" />
            <el-table-column prop="cate_name" label="分类名称" width="180" />
            <el-table-column prop="" label="操作" width="110" >
                <template #default="scope">
                    <div class="ope-container">
                        <el-button plain size="small" type="primary" :icon="Edit" @click="doEdit(scope)"></el-button>
                        <el-button plain size="small" type="danger" :icon="Delete" @click="del(scope)"></el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="" label=""/>

            <template #empty>
                <el-empty description="没有数据"></el-empty>
            </template>
        </el-table>

        <EditDialog  ref="editDialogRef" @refreshData="refreshTable"/>
    </PageContainer>
</template>
<script setup>
import { onMounted,ref } from 'vue'
import { getCateList$, delete$ } from '@/api/article'
import { Edit, Delete } from '@element-plus/icons-vue'
import EditDialog from './components/EditDialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const editDialogRef = ref()
const loading = ref(false)
const tableData = ref([])

const refreshTable = async () => {
    loading.value = true
    const res = await getCateList$()
    loading.value = false
    tableData.value = [...res.data]
}
const initPage = async () => {
    refreshTable()
}
const doEdit = scope => {
    console.log('打开对话框传递的参数：',scope.row)
    editDialogRef.value.open(scope.row)
}
const del = async scope => {
    await ElMessageBox.confirm('您确认要删除吗？','警告',{type: 'warning', confirmButtonText: '确认', cancelButtonText: "取消"})

    const { id } = scope.row
    const { code,message } = await delete$(id)
    if(code === 0){
        ElMessage.success('删除成功！')
        refreshTable()
    }else{
        ElMessage.error(message)
    }
}
onMounted(() =>{
    initPage()
})
</script>
<style>
.ope-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
</style>